<template>
  <div class="main">
    <div class="flex-cb venue-list">
      <div v-for="(item, index) in venueListData" :key="index" class="venue-item" @click="toHomePage(item)">
        <div class="flex-cb top-title">
          <div class="title">{{ item.name }}</div>
          <div class="link">{{ $t('message.jrcg') }}<i class="el-icon-arrow-right" /></div>
        </div>
        <div class="bottom-info">
          <div class="base-bg-cover left-image" :style="'background-image: url(' + item.showLogo + ')'" />
          <div class="right-info">
            <div class="tel">{{ $t('message.dh') }}：{{ item.telephone }}</div>
            <div class="address">{{ $t('message.dizhi') }}：{{ item.address }}</div>
            <div class="open-time">{{ $t('message.yysj') }}：{{ item.openTimeStart + ' - ' + item.openTimeEnd }}</div>
          </div>
        </div>
      </div>
    </div>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="currentChange"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { venueList } from '@/api'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      pagination: {
        firstQueryTime: parseTime(new Date()),
        page: 1,
        rows: 10
      },
      venueListData: [],
      total: 0
    }
  },
  created() {
    this.getVenueList()
  },
  methods: {
    getVenueList() {
      const param = { id: sessionStorage.getItem('userId') }
      const { pagination } = this
      venueList({ param, pagination, userId: sessionStorage.getItem('userId') }).then(res => {
        if (res.errorCode !== '000000') return
        if (res.recordList.length <= 1) {
          sessionStorage.setItem('venueId', res.recordList[0].id)
          sessionStorage.setItem('logo', res.recordList[0].showLogo)
          sessionStorage.setItem('name', res.recordList[0].name)
          sessionStorage.setItem('venueInfo', JSON.stringify(res.recordList[0]))
          this.$router.push('/home')
        }
        this.venueListData = res.recordList
        this.total = res.totalCount
      })
    },
    // 页码切换
    currentChange(page) {
      this.$set(this.pagination, 'page', page)
      this.getVenueList()
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.currentChange(1)
    },
    toHomePage(e) {
      sessionStorage.setItem('venueId', e.id)
      sessionStorage.setItem('logo', e.showLogo)
      sessionStorage.setItem('name', e.name)
      sessionStorage.setItem('venueInfo', JSON.stringify(e))
      // console.log(sessionStorage.getItem('logo'))
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 40px;
}
.venue-list {
  flex-wrap: wrap;
  &::after {
    content: '';
    width: calc((100% - 60px) / 3);
  }
  .venue-item {
    width: calc((100% - 60px) / 3);
    margin-bottom: 30px;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #fff;
    padding: 24px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.6s;
    &:hover {
      background-color: #435EBE;
      * {
        color: #fff!important;
      }
      .top-title {
        .title::before {
          background-color: #fff;
        }
      }
      // .left-image {
      //   transform: scale(1.1) rotate(360deg);
      // }
    }
    .top-title {
      margin-bottom: 20px;
      .title {
        font-size: 17px;
        font-weight: bold;
        position: relative;
        padding-left: 14px;
        &::before {
          content: '';
          display: inline-block;
          background-color: #435EBE;
          width: 4px;
          height: 100%;
          border-radius: 2px;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .link {
        font-size: 14px;
        color: #435EBE;
        i {
          font-weight: bold;
        }
      }
    }
    .bottom-info {
      min-height: 108px;
      display: flex;
      .left-image {
        width: 144px;
        margin-right: 20px;
        border-radius: 4px;
        flex-shrink: 0;
        transition: all 0.6s;
      }
      .right-info {
        display: flex;
        flex-direction: column;
        color: #333;
        font-size: 14px;
        line-height: 1.5em;
        font-weight: bold;
        .tel {
          margin-bottom: 14px;
          flex-shrink: 0;
        }
        .address {
          margin-bottom: 14px;
          flex: 1;
          overflow: hidden;
        }
        .open-time {
          flex-shrink: 0;
        }
      }
    }
  }
}
</style>
